<template>
	<view>
		<!-- 遮罩 -->
		<view class="uni-mask" @touchmove.stop.prevent="" v-if="flag" @click="flag=false"></view>

		<view class="top">
			<view @click="sortType(0)" :class="comprehensive == 1 ? 'fe0000':''">综合排序</view>
			
			<view @click="sortType(1,0)" v-if="Sales==0">
				<text>销量</text>
				<image class="sjx" src="@/static/images/sjx.jpg" mode=""></image>				
			</view>
			<view @click="sortType(1,1)" v-if="Sales==1">
				<text class="fe0000">销量</text>
				<image class="sjx" src="@/static/images/sjx_sx.jpg" mode=""></image>				
			</view>
			<view @click="sortType(1,2)" v-if="Sales==2">
				<text class="fe0000">销量</text>
				<image class="sjx" src="@/static/images/sjx_jx.png" mode=""></image>				
			</view>
			
			
			<view @click="sortType(2,0)" v-if="Price==0">
				<text>价格</text>
				<image class="sjx" src="@/static/images/sjx.jpg" mode=""></image>									
			</view>
			<view @click="sortType(2,1)" v-if="Price==1">
				<text  class="fe0000">价格</text>
				<image class="sjx" src="@/static/images/sjx_sx.jpg" mode=""></image>					
			</view>
			<view @click="sortType(2,2)" v-if="Price==2">
				<text  class="fe0000">价格</text>
				<image class="sjx" src="@/static/images/sjx_jx.png" mode=""></image>					
			</view>
			<view  @click="shaixuan()">筛选</view>
		</view>
		
		
		
		<view class="ListBox">
			<view class="Layout FlexBox">
				<view class="List" v-for="(itme,index) in ListInfo" :key="index" @click="Navto(itme.goods_id)">
					
					<!-- <view class="Label">换购</view> -->
					<view class="ImgBOx">
						<image :src="itme.goods_image" mode="widthFix" class="spImg"></image>
						<!-- 
						<view v-if="itme.markup_type==1" class="Discoun">{{itme.markup_point}}积分换购</view>
						<view v-if="itme.markup_type==2" class="Discoun">加{{itme.markup_price}}元换购</view> -->
					</view>
					<view class="describe">
						{{itme.goods_name}}
					</view>
					<view class="Info FlexBox">
						<view class="Price">￥{{itme.goods_price}}</view>
						<view class="Sales" @click.stop="AddCar(itme.goods_id)"><image src="@/static/images/w-4.png" mode="" ></image></view>
						<!-- 销量:{{itme.goods_salenum}} -->
					</view>
				</view>
			</view>
		</view>
		<!-- <view v-if="ListInfo.length==0" class="IfNull">
			暂无活动商品
		</view> -->


		<!-- 筛选 -->
		<view  class="sxMask" v-if="flag" @click="close()">
			<view class="innerMask" @click.stop="zuzhi()">
				<view class="innerMaskTop flex_bettween flex_align">
					<view>筛选</view>
					<image src="@/static/images/sx.png" class="sxImage"></image>
				</view>
				<scroll-view scroll-y="true" style="height: 1000rpx;" class="scrollX">
					<view class="innerMaskCenter">
						<view class="innerMaskCenterT flex_bettween flex_align">
							<text class="fl fs18 bold">品牌</text>
							<view class="fr fs18 C999 flex_align" >
								<view class="fs18 C999" @click="Allpinpai()">全部</view>
								<image class="xj" src="@/static/images/down.png"></image>
							</view>
							
						</view>
						<view class="pplis" :class="{'show':pinpai}">
							<text class="ppli" :class="{xuanze:filter1==index+1}" v-for="(item,index) in pinpaiList" :key='index' @click="brand(index,item.brand_id)">{{item.brand_name}}</text>
						</view>
						
						<view class="innerMaskCenterT mt flex_bettween flex_align">
							<text class="fl fs18 bold">商品分类</text>
							<view class="fr fs18 C999 flex_align" >
								<view class="fs18 C999"  @click="AllClass()">全部</view>
								<image class="xj" src="@/static/images/down.png"></image>
							</view>
						</view>
						<view class="ppfllis" :class="{'show':aClass}">
							<text class="ppli" :class="{xuanze:filter2==index+1}" v-for="(item,index) in fenleiList" :key='index' @click="recommend_class(index,item.gc_id)">{{item.gc_name}}</text>				
						</view>
					</view>
								
				</scroll-view>
				
				<view class="innerMaskBottom">
					<button class="fl innerMaskBottom1" @click="chongzhi()">重置</button>
					<button class="fr innerMaskBottom2" @click="innerMask()">确定</button>
				</view>
			</view>
		</view>
		
		<view v-if="ListInfo.length<=0">
			<image style="width: 100%;" :src="`${picUrl}/InfoNull.png`" mode="widthFix"></image>
		</view>
		
		<view class="h200"></view>
		<view class="BottBox" v-if="cart_total_price">
			<view class="Subtotal">
				<view class="Text">
					小计：<text class="Price">￥{{cart_total_price}}</text>
				</view>
				<view class="">
					快去选购商品吧
				</view>
			</view>
			<view class="BtnBox">
				<view class="Repurchase" @click="Repurcha()">
					去换购
				</view>
				<view class="shopCar" @click="ToCar()">
					去购物车
				</view>
				
			</view>
		</view>

		<view class="shadow" @click="hide()" v-if="Repurchase">
			<view class="purchase">
				<view class="Title">换购商品</view>
				
				<view v-if="ChangeList.length<=0" style="margin: 40rpx auto;">商家暂时没有设置赠品！</view>
					<scroll-view scroll-y="true" class="Box">
						<view class="List"  :class ="[(num == index) ? 'bgco':'']" @click.stop="Choice(index,item.goods_id)" v-for="(item,index) in ChangeList" :key="index">
							<view class="Buttom"></view>
							<view class="ImgBox"><image :src="item.goods_image" mode=""></image></view>
							<view class="">
								<view class="content">{{item.goods_name}}</view>
								<view class="Info FlexBox" style="width: 470rpx;">
									<view class="Price">￥{{item.goods_price}}</view>
									<view class="threshold" >加<text class="red">￥{{item.deduc_price}}</text>元可选</view>
								</view>
								
							</view>
						</view>
					</scroll-view>
				<view class="h120"></view>
				<view class="BottBox changeInfo">
					<view class="Num">
						<!-- 已选赠品<text class="red">1</text>/1件 -->
					</view>
					<view class="Settlement" @click="confirm()">
						确定
					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				ListInfo: [],
				UserInfo:[],
				comprehensive:1,
				Sales:0,
				Price:0,
				flag:false,//控制筛选
				filter1:0,
				brand_id:"",
				filter2:0,
				gc_id:"",
				curpage:1,
				store_id:32,//店铺id
				repur_id:1,//活动id
				pinpaiList:[],
				fenleiList:[],
				Repurchase:false,
				ChangeList:"",
				num:"aaa",
				xzgoods_id:"",
				cart_total_price:"",
				pinpai:false,
				aClass:false,
				sort2:"",
				order:"",
			}
		},
		onLoad(e){
			if(e.store_id){
				this.store_id=e.store_id;
			}
			if(e.repur_id){
				this.repur_id=e.repur_id;
			}
		},
		created() {
			this.getList();
			this.getbrand();
			this.getClass();
		},
		onReachBottom() {
			if(this.curpage){
				this.getList("","",true)
			}else{
				uni.showToast({
					title:'已是最后一页！',
					icon:'none'
				})
			}
		},
		methods: {
			close(){
				this.flag=false;
			},
			Allpinpai(){
				this.pinpai=!this.pinpai;
			},
			AllClass(){
				this.aClass=!this.aClass;
			},
			shaixuan(){
				this.flag=true;
				this.flag2=false;
				this.sai=2;
			},
			confirm(goods_id){
				let that=this;
				this.$util.request({//选择换购商品
					url:'/mobile/index.php?act=promotion_repur&op=repur_select',
					method:'POST',
					data:{
						goods_id:that.xzgoods_id,
						repur_id:that.repur_id,
						store_id:that.store_id
					}
				}).then(res=>{
					if(res.error_code==0){
						uni.showToast({
							title:'选择成功！'
						})
					}else{
						uni.showToast({
							title:res.message,
							icon:"none"
						})
					}
				})
			},
			Choice(index,goods_id){//选择商品
				this.num=index;
				this.xzgoods_id=goods_id
			},
			AddCar(goods_id){
				this.$util.request({
					url:'/mobile/index.php?act=member_cart&op=cart_add',
					method:'POST',
					data:{
						goods_id:goods_id,
						quantity :'1',
						is_promotion:1,
					}
				}).then(res=>{
					if(res.datas=='1'){
						uni.showToast({
							title:'加入购物车成功！'
						})
						this.getList("","","",true)
					}else{
						uni.showToast({
							title:res.message,
							icon:'none'
						})
					}
				})
			},
			Repurcha(){
				this.getChange();
				this.Repurchase=true;
			},
			hide(){
				this.Repurchase=false;
			},
			ToCar(){
				uni.switchTab({
					url:"/main/cart/list"
				})
			},
			Navto(goods_id){
				uni.navigateTo({
					url:"/mall/goods/info?goods_id="+goods_id
				})
			},
			getChange(){//获取换购商品列表
				let that = this;
					this.$util.request({
						url: '/mobile/index.php?act=promotion_repur&op=repur_list',
						method: 'get',
						data: {store_id:that.store_id,repur_id:that.repur_id},
					}).then(function(res) {
						that.ChangeList=res.datas.goods_list
					})
				},
			chongzhi(){
				this.filter1=0;
				this.filter2=0;
				this.brand_id="";
				this.gc_id="";
			},
			innerMask(){
				this.flag=false;
				this.getList();
			},
			brand(index,brand_id){
				this.filter1=index+1;
				this.brand_id=brand_id;
			},
			recommend_class(index,gc_id){
				this.filter2=index+1
				this.gc_id=gc_id;
			},
			getbrand(){//获取品牌列表
				let that = this;
					this.$util.request({
						url: '/mobile/index.php?act=brand&op=index',
						method: 'get',
						data: {},
					}).then(function(res) {
						that.pinpaiList=res.datas
						console.log(res)
					})
			},
			getClass(){//获取分类列表
				var that=this		
				this.$util.request({
					url: '/mobile/index.php?act=index&op=recommend_class',
					method: 'get',
					data: {},
				}).then(function(res) {
					that.fenleiList=res.datas.list
				})
			},
			getList(sort="",order="",stat,type){//获取列表信息
				if(sort){
					this.sort2=sort
				}
				if(order){
					this.order=order
				}
				
				let that = this;
					this.$util.request({
						url: '/mobile/index.php?act=promotion_repur&op=list',
						method: 'get',
						data: {
							curpage:that.curpage,
							store_id:that.store_id,
							repur_id:that.repur_id,
							sort:that.sort2,
							order:that.order,
							gc_id:that.gc_id,
							b_id:that.brand_id},
					}).then(function(res) {
						// console.log(res)
						if(res.error_code==0){
							that.cart_total_price=res.datas.cart_total_price;
							// that.ListInfo=res.datas.goods_list;
							if(!type){
								if(stat){
									that.ListInfo=that.ListInfo.concat(res.datas.goods_list) ;
									
								}else{
									that.ListInfo=res.datas.goods_list;
								}
								that.curpage++;
								if(that.curpage>=res.datas.page_total){
									that.curpage=false;
								}
							}
							
						}else{
							uni.showToast({
								icon:"none",
								title:res.message
							})
						}
						
						
					})
				},
			sortType(index,state){
				let that=this;
				that.brand_id="";
				that.gc_id="";
				that.curpage=1;
				if(index==0){
					that.comprehensive = true;
					that.Sales=0;
					that.Price=0;
					that.getList();
				}
				if(index==1){//销量删选
					that.comprehensive = false;
					that.Price=0;
					if(state==0){
						that.Sales=1;
						that.getList(1,1);
					}else if(state==1){
						that.Sales=2;
						that.getList(1,2);
					}else if(state==2){
						that.Sales=1;
						that.getList(1,1);
					}
				}
				if(index==2){//价格删选
					that.comprehensive = false;
					that.Sales=0;
					if(state==0){
						that.Price=1;
						that.getList(3,1);
					}else if(state==1){
						that.Price=2;
						that.getList(3,2);
					}else if(state==2){
						that.Price=1;
						that.getList(3,1);
					}
				}
					
			},
			zuzhi(){}
			
			
		}
	}
</script>

<style >
	.show{
		height: auto !important;
		overflow: overlay !important;
	}
	.pplis,.ppfllis{
		height: 130rpx;
		overflow: hidden;
	}
	.flex_bettween{
		justify-content: space-between;
	}
	.bgco{
		background-color:  #F8F8F8 !important;
	}
	.shadow{
		width: 100%;
		height: 100vh;
		background-color: rgba(51,51,51,0.2);
		position: fixed;
		top: 0;
		z-index: 8888888888888;
	}
	.purchase{
		position: fixed;
		bottom: 0;
		background-color: #f1f1f1;
		width: 100%;
	}
	.purchase .Title{
		height: 80rpx;
		line-height: 80rpx;
		background-color: #f1f1f1;
		padding-left: 40rpx;
		font-size: 30rpx;
	}
	.purchase .List{
		display: flex;
		padding: 30rpx;
		background-color: #FFFFFF;
		margin-bottom: 10rpx;
	}
	.purchase .List .content{
		height: 100rpx;
		line-height: 50rpx;
		display: -webkit-box;
		-webkit-box-orient:vertical;
		-webkit-line-clamp:2;
		overflow: hidden;
	}
	.purchase .List .ImgBox image{
		width: 150rpx;
		height: 150rpx;
		margin: 0 20rpx;
	}
	.purchase .List  .Info{
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}
	.Box{
		height: 700rpx;
	}
	.h120{
		height: 120rpx;
	}
	.changeInfo .Num{
		line-height: 110rpx;
		text-align: right;
		padding-right: 50rpx;
		width: 500rpx;
		box-sizing: border-box;
		color: #000000;
	}
	.changeInfo .Settlement{
		text-align: center;
		line-height: 110rpx;
		background-color: #e21363;
		color: #FFFFFF;
		width: 250rpx;
	}
	.red{
		color: red;
	}
	.h200{
		height: 200rpx;
	}
	.BottBox{
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 110rpx;
		background-color: #FFFFFF;
		z-index: 100;
		display: flex;
	}
	.BottBox .Subtotal{
		width: 40%;
		text-align: right;
		padding-right: 40rpx;
		box-sizing: border-box;
		font-size: 26rpx;
		line-height: 40rpx;
	}
	.BottBox .BtnBox{
		display: flex;
		width: 60%;
		align-items: center;
		justify-content: center;
	}
	.BottBox .BtnBox>view{
		width: 200rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		background-color: #ff4300;
		color: #FFFFFF;
		font-size: 35rpx;
	}
	.BottBox .Repurchase{
		border-top-left-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
	}
	.BottBox .Text{
		font-size: 30rpx;
		color: #000000;
		}
	.BottBox .Price{
		color: #ff0000 !important;
	}
	.BottBox .shopCar{
		background-color: #e5258e !important;
		border-top-right-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
	}
	.IfNull{
		text-align: center;
		font-size: 30rpx;
		/* margin: 40rpx 0; */
		font-weight: bold;
	}
	.xuanze{
		background-color: #ff4300 !important;
		color: #FFFEFF !important;
	}
	.Layout {
		margin: 0 15rpx;
		box-sizing: border-box;
	}
	.ImgBOx{
		width: 100%;
		height: 400rpx;
		overflow: hidden;
		display: flex;
		align-items: center;
	}
	.Sales image{
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}
	.search {
		border-top: 1rpx solid #EEEEEE;
		padding: 10rpx 30rpx;
		background-color: #FFFFFF;
		position: relative;
	}
	.search .ssIco{
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		top: 18rpx;
		left: 45rpx;
		
	}
	.flex_align{
		display: flex;align-items: center;
	}
	.searchBtn{
		color: #ff4300;
		font-weight: bold;
	}
	.search input {
		background-color: #efeff4;
		width: 610rpx;
		border-radius: 10rpx;
		text-indent: 60rpx;
	}

	.Banner image {
		width: 100%;
		height: 250rpx;
	}


	.top{
		border-top: 3px #f5f5f5 solid;
		background-color: #FFFFFF;
		height: 80upx;
		line-height: 80upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 0 32upx;
		margin-top: -20rpx;
	}
	.top>view{
		height: 80upx;
		line-height: 80upx;
		font-size: 30upx;
	}
	.fe0000{
		color: #ff4300;
	}
	.sjx{
		position: relative;
		top: 8upx;
		width: 30upx;
		height: 30upx;
	}


	.FlexBox {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.ListBox {
		margin-top: 30rpx;
	}

	.ListBox .List {
		background-color: #FFFFFF;
		border-radius: 10rpx;
		width: 350rpx;
		padding: 10rpx;
		position: relative;
		box-sizing: border-box;
		margin-bottom: 20rpx;
	}

	.ListBox .List .Label {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 100;
		background-color: #ff4300;
		padding: 0 10rpx;
		border-top-left-radius: 10rpx;
		color: #FFFFFF;
	}

	.ListBox .List .spImg {
		width: 100%;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
		height: 280rpx;

	}

	.ListBox .List .Discoun {
		background-color: #ff4300;
		text-align: center;
		color: #FFFFFF;
		margin-top: -20rpx;
	}

	.ListBox .List .describe {
		line-height: 30rpx;
		margin: 10rpx;
		height: 60rpx;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		color: #000000;
	}

	.ListBox .List .Info .Price {
		color: #ff4300;
	}

	.ListBox .List .Info .Sales {
		color: #000000;
	}
	/* 筛选 */
	.sxMask{
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background-color: rgba(0,0,0,0.3);
		z-index: 100000;
	}
	.sxImage{
		width: 30upx;height: 30upx;margin-left: 15upx;
	}
	.arrImage{
		width: 36upx;height: 15upx;margin-left: 5upx;
	}
	.innerMask{
		width: 598upx;
		height: 1192upx;
		background-color: #fff;
		position: absolute;
		right: 0;
		bottom: 0;
		z-index: 100000;
	}
	.innerMaskTop{
		padding:0 28upx;
		height: 83upx;
		line-height: 83upx;
		background-color: #fafafa;
		font-size: 21upx
	}
	.innerMaskCenterT{
		height: 80upx;
		line-height: 80upx;
		padding: 0 28upx;
	}
	.bold{
		font-weight: bold;
	}
	.C999{
		color: #999999;
	}
	.fl{
		float: left;
	}
	.fr{
		float: right;
	}
	.fs18{
		font-size: 24upx;
	}
	.fs21{
		font-size: 26upx
	}
	.pplis{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 0 28upx;
		flex-wrap: wrap;
	}
	.ppli{
		margin: 8upx 10upx;
		padding: 5upx 0upx;
		font-size: 22upx;
		background-color: #f0f2f5;
		border-radius: 5upx;
		min-width: 29%;
		text-align: center;
		align-items: center;
	}
	.ppfllis{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 0 28upx;
		flex-wrap: wrap;
		border-radius: 15upx;
	}
	.ppflli{
		margin-top: 20upx;
		padding: 5upx 40upx;
		font-size: 22upx;
		background-color: #f0f2f5;
		border-radius: 5upx;
	}
	.innerMaskBottom{
		width: 100%;
		position: absolute;
		height: 80upx;
		bottom: 0;
		left: 0;
		
	}
	.innerMaskBottom button{
		height: 80upx;
		line-height: 80upx;
		width: 50%;		
		border: none;
		outline: none;
		border-radius: 0;
	}
	.innerMaskBottom1{
	
		background-color: #d2d2d2;
		color: #666666;
		font-size: 21upx
	}
	.innerMaskBottom2{
		background-color: #ff4300;
		color: #FFFFFF;		
		font-size: 21upx
	}
	
	.jgInput{
		padding-left: 28upx;
		display: flex;
		flex-direction: row;
	}
	.jgInput input{
		border: none;
		border-radius: 5upx;
		text-align: center;
		background-color: #f0f2f5;
		width: 162upx;
		height: 43upx;
	}
	.inputC{
		position: relative;
		top: -5upx;
		padding: 0 15upx;
	}
	.sx{
		width: 30upx;
		height: 30upx;
		position: relative;
		top: 8upx;
		left: 5upx;
	}
	.xj{
		margin-left: 8rpx;
		width: 24upx;
		height: 14upx;
	}
	.mt{
		margin-top: 20upx;
	}
</style>
